<template>
  <div style="width: 100%; height: 800px;">
    <div class="Id">
      <h1 style="text-align: center;color: blanchedalmond">信息{{inFor[url].mypiture}}</h1>
      <img :src="require('../../assets/img/person/'+inFor[url].mypiture+'.jpg')" alt="picture" style="width: 100px;height: 100px;">
      <div class="id1">  <h2>ID: <span class="text">{{inFor[url].id}}</span> </h2>
        <h3>姓名：<span class="text">{{inFor[url].name}}</span></h3>
        <h3>所属项目组：<span class="text">{{inFor[url].project}}</span></h3>
        <h3>电话：<span class="text">{{inFor[url].call1}}</span></h3>
        <h3>缺勤次数：<span class="text">{{inFor[url].absence}}</span></h3>
        <h3>正常次数：<span class="text">{{inFor[url].normal}}</span></h3>
        <!--      <h3>加班次数:<span>{{inFor[url].workOvertime}}</span></h3>-->

      </div>
      <div style="width: 50%;height: 200px;"><bin-home :inFor="inFor" :key="timer" :u-r-l= url /></div>
      <div style="width: 50%;height: 265px;position: relative;left: 50%;top: -90%" ><Task :bTask="taskLi"/></div>
      <div style="width: 50%;height: 265px;position: relative;left: 50%;top: -90%"><pie-home :pie-date="pieDate" :in-for="inFor" :u-r-l=url /></div>

    </div>
    <table style="width: 100%;text-align: center;border: 1px solid cyan; box-shadow: 1px 1px 20px cyan;">
      <tr style="color: cyan">
        <th>ID</th>
        <th style="width: 5%">姓名</th>
        <th>所属项目组</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
    </table>
    <div style="width: 100%;height: 358px; box-shadow: 1px 1px 20px cyan;overflow-x: hidden;scrollbar-face-color:rgba(255, 251, 240, 0.3) "
        @mouseover="mouseOver" @mouseleave="mouseOut">
    <vue-seamless-scroll :data="inFor" class="seamless-warp">
      <ul class="item" style="width: 100%;position: relative;left: -4%;margin: 0">
        <li v-for="(item,index) in inFor" :key="index" style="display: flex;">
          <span class="title" style="width: 10%;text-align: center" v-text="item.id" ></span>
          <span class="title" style="width: 10%;padding-left: 15px" v-text="item.name"></span>
          <span class="title" style="width: 35%;text-align: center">{{item.project}}</span>
          <span class="title" style="width: 30%;text-align: center">{{item.call}}</span>
          <span  style="width: 11%;padding-left: 15px"><button @click="getUrl(index)" @callFather = "getUrl(index)">详情</button></span>
        </li>
      </ul>
      <ul class="item" style="width: 100%;position: relative;left: -4%;margin: 0px">
        <li v-for="(item,index) in inFor" :key="index" style="display: flex;">
          <span class="title" style="width: 10%;text-align: center" v-text="item.id" ></span>
          <span class="title" style="width: 10%;padding-left: 15px" v-text="item.name"></span>
          <span class="title" style="width: 35%;text-align: center">{{item.project}}</span>
          <span class="title" style="width: 30%;text-align: center">{{item.call1}}</span>
          <span  style="width: 11%;padding-left: 13px"><button @click="getUrl(index)">详情</button></span>
        </li>
      </ul>

    </vue-seamless-scroll>
      </div>
  </div>
</template>

<script>
import Tabbar from "../common/Tabbar";
import Task from "../normalHome/Task";
import pieHome from "../echarts/pieHome";
import binHome from "../echarts/binHome";

import vueSeamlessScroll from 'vue-seamless-scroll'
import {Information} from "../../network/echartsHome";

export default {
  name: "information1",
  components:{
    Tabbar,
    Task,
    pieHome,
    binHome,

    vueSeamlessScroll

  },
  props:{
    taskLi:{
      type:Array,
      default(){
        return[]
      }
    },

    // inFor:{
    //   type:Array,
    //   default() {
    //     return [];
    //   }
    // },
    inForBinDate:{
      type:Object,
      default(){
        return{}
      }
    },
    //打卡情况
    pieDate:{
      type:Object,
      default(){
        return{}
      }
    }
  },
  data(){
    return{
      url:0,
      acg:"",
      Orange:"orange",
      timer:"",
      inFor:[],
    }
  },
  mounted() {
    this.acg =setInterval(this.getAdd,1500)
    this.inForaxios()

  },
  beforeDestroy() {
    clearInterval(this.acg)
  },
  methods:{
    inForaxios(){
      Information().then(res => {
        this.inFor = res.data;
      }).catch(resp => {
        console.log(resp)
      })
    },
    getAdd(){
      if(this.url===this.inFor.length-1){
        this.url=-1
      }
      this.url++;
    },
    getUrl(index){
      this.url = index
    },
    mouseOver(){
      clearInterval(this.acg)
    },
    mouseOut(){
      this.acg =setInterval(this.getAdd,1500)
    }
  }
}
</script>

<style scoped>
img{
  position: relative;
  top: 5%;
  left: 5%;
}
.Id{
  width: 100%;
  height: 600px;
  position: relative;
  border: 1px solid cyan; box-shadow: 1px 1px 20px cyan
}
.id1{
  width: 30%;
  height: 180px;
  position: relative;
  top: -20%;
  left: 20%;
}
td{
  color: aquamarine;
}
button{
  background-color: blanchedalmond;
  width: 70px;
  cursor: pointer;
  border-radius: 5px;
}
button:hover{
  background-color: darkred;
  color: white;
}
h2{
  color: cyan;
}
h3{
  color: cyan;
}
.text{
  color: orangered;
}
.title{
  color: cyan;
}
tr{
  height: 50px;
  overflow: scroll;
}
tr:nth-child(2n){
  background-color: rgba(255, 251, 240, 0.3);
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}
li{
  width: 100%;
}

li:nth-child(2n){
  background-color: rgba(255, 251, 240, 0.3);
}
li:hover{
  background: orange;
}
</style>
